<script setup lang="ts">
import { ref } from 'vue'
const list = ref<number[]>([])
// 控制加载中 loading 默认是false
const loading = ref(false)
// 控制加载结束状态 finished一直是false, 如果没有再要请求的数据, finished要设置为true 就会展示 finished-text的值
const finished = ref(false)

// onLoad处理函数, 默认上来就会执行一次, 如果执行一次请求回来的数据没有占满屏幕,会再次执行,....
// 向下滚动也会再次执行onload处理函数
// 在onload函数执行期间, 组件会自动的将loading设置为true, 一次请求结束后, 需要在父组件中将loading手动设置为false
const onLoad = () => {
  console.log(1111)
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1)
    }
    // 加载状态结束
    loading.value = false
    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>
<template>
  <div class="article-page">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<style scoped>
.article-page {
  padding: 50px 0;
}
</style>
